<!DOCTYPE HTML>
<html>
<head>
    <style>
        html,body{
            height: 100%;
            margin: 0;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .up-area{
            border: 3px dotted #dcdcdc;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<div>
    <p>将电脑图片拖到下方即可上传</p>
    <div class="up-area"
         ondragenter="dragEnter(event)"
         ondragleave="dragLeave(event)"
         ondrop="getImg(event)"></div>
</div>
</body>
</html>

<script>
    function getImg(e) {
        setDragingStyle(e,{borderColor: '#dcdcdc'});// 取消拖放中样式

        var imgArea = document.getElementsByClassName('up-area');
        // 限制上传数量
        if(imgArea[0].childNodes.length >= 9){
            alert('一次最多上传9张图片..')
            return;
        }

        var f = e.dataTransfer.files[0];      //找到拖放的文件
        var fr = new FileReader();        //创建文件读取器
        fr.readAsDataURL(f);         //读取文件内容

        fr.onload = function () {       //读取完成
            var img = new Image();
            img.src = fr.result;        //使用读取到的数据
            img.style.width = '100px';
            img.style.height = '100px';
            e.target.appendChild(img);
        }
    }

    function setDragingStyle(e,style) {
        let self = e.target;
        self.style.borderColor = style.borderColor;
    }
    function dragEnter(e) {
        let style = {
            borderColor: 'black'
        }
        setDragingStyle(e,style);
    }

    function dragLeave(e) {
        let style = {
            borderColor: '#dcdcdc'
        }
        setDragingStyle(e,style);
    }

    window.onload = function () {
        //监听document的drop事件——取消其默认行为：在新窗口中打开图片
        document.ondragover = function(e){
            e.preventDefault(); //使得drop事件可以触发
        }
        document.ondrop = function(e) {
            e.preventDefault(); //阻止在新窗口中打开图片，否则仍然会执行下载操作！！！
        }
    }
</script>